<template>
  <div class="register_body">
    <div>
      <input v-model="username" class="register_text" type="text" placeholder="请输入用户名">
    </div>
    <div>
      <input v-model="password" class="register_text" type="password" placeholder="请输入密码">
    </div>
    <div class="register_btn">
      <button @touchstart="handleToRegister">注册</button>
    </div>
<!--    <div class="register_link">-->
<!--      <router-link to="/mine/login">立即登录</router-link>-->
<!--    </div>-->
  </div>
</template>
<script>
import { messageBox } from '../JS'
export default {
  name: 'register',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleToRegister () {
      this.axios.post('/api2/users/register', {
        username: this.username,
        password: this.password
      }).then((res) => {
        var status = res.data.status
        var This = this
        if (status === -1) {
          messageBox({
            title: '注册',
            content: '用户注册成功',
            ok: '确定',
            handleOk () {
              This.$router.push('/Individual/Login')
            }
          })
        } else {
          messageBox({
            title: '注册',
            content: '用户注册成功',
            ok: '确定',
            handleOk () {
              This.$router.push('/Individual/Login')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .register_body{margin: 150px 40px}
  .register_body .register_text{ width:100%; height: 50px; border:none; border-bottom: 1px #25a4bb solid; margin-bottom: 5px; outline: none; text-align:center;}
  .register_body .register_btn{ height:40px; margin:10px;}
  .register_body .register_btn button{ width:100%; margin: 30px auto; height:100%; background:#66cdaa; border-radius: 18px; border:none; display: block; color:white; font-size: 16px;}
  .register_body .register_link{ display: flex; justify-content:space-between;}
  .register_body .register_link a{ text-decoration: none; margin:0 5px; font-size: 16px; color:#66cdaa;}
</style>
